var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var animate=document.getElementById("animate");
var image= new Image();
image.src='image1.jpg';
image.onload=function () {
    //加载图片到画布上
    image.w=image.width;
    image.h=image.height;
    cxt.drawImage(image,0,0,image.w,image.h);
    // 获取图像的像素信息，并根据像素信息重新绘制出粒子，
    // canvas有一个叫getImageData的接口，通过该接口可以获取到画布上指定位置的全部像素的数据
    var imagedata=cxt.getImageData(0,0,image.w,image.h);
    calculate(imagedata);
    Animate();
}
/*
t: 动画执行到当前帧当前时间
b: begInnIng value,  开始值
c: change In value,  结束值 - 开始值（总的位移）
d: duration 总时间（持续时间）
*/
function easeInOutQuad(t,b,c,d) {
    t/=d/2;
    if(t<1)
    {
        return c/2*Math.pow(2,10*(t-1))+b;
    }
    t--;
    return c/2*(-Math.pow(2,-10*t)+2)+b;
}
//创建粒子数组
var particles=[];
//粒子对象
var Particle=function (x,y,radius,pos,img) {
    //初始位置
    this.sx=400;
    this.sy=450;
    //目标位置
    this.tx=x;
    this.ty=y;
    //粒子半径
    this.radius=radius;
    //当前帧数
    this.frameNum=0;
    //总的帧数
    this.frameCount=70;
    //播放完的标识符
    this.complete=false;
    //延迟标识
    this.delay=this.frameCount*Math.random();;
    this.delayCount=0;
    //颜色Math.random()).toFixed(0)JS中的舍入
    this.fillStyle = "rgba("+img.data[pos]+","+img.data[pos+1]+","+img.data[pos+2]+","+img.data[pos+3]+")";
    //更新位置
    this.update=function(){
        if(this.delay>this.delayCount)
        {
            this.delayCount++;
            return;
        }
        if(this.frameNum<this.frameCount){
            //获取当前位置x的位置， this.frameNum当前时间，开始位置sx,总位移this.tx-this.sx，frameCount总的时间
            this.cur_x=easeInOutQuad(this.frameNum,this.sx,(this.tx-this.sx),this.frameCount);
            //获取当前位置y轴的位置， this.frameNum当前时间，开始位置sy,总位移this.ty-this.sy，frameCount总的时间
            this.cur_y=easeInOutQuad(this.frameNum,this.sy,(this.ty-this.sy),this.frameCount);
            //帧数增加
            this.frameNum++;
        }
        else{
            this.complete=true;  //完成
        }
    }
    //画粒子，是圆形的
    this.draw=function () {
        //保存当前画布
        cxt.save();
        cxt.beginPath();
        cxt.arc(this.cur_x,this.cur_y,this.radius,Math.PI*2,false);
        cxt.fillStyle=this.fillStyle;
        cxt.fill();
        cxt.restore();
    }
}
//获取粒子
/*function calcuate() {
    var cols=100;  //行
    var rows=100;
    //设成100行100列后每个单元的的宽度
    var s_width=parseInt(image.width/cols);
    var s_height=parseInt(image.height/rows);

    var pos=0;//数组中的位置
    var par_x,par_y;   //粒子的x,y轴
    var data=image.imageData.data;  //像素值数值
    for(var i=1;i<=cols;i++)
    {
        for(var j=1;j<=rows;j++)
        {
            //计算（i,j）在数组中R的坐标值
            pos=[(j*s_height-1)*image.w+(i*s_width-1)]*4;
            //判断R是否符合要求
            if(data[pos]>250)
            {
                var particle={
                    //偏移 x,y随机
                    x: image.x+i*s_width+(Math.random()-0.5)*20,
                    y:image.y+j*s_height+(Math.random()-0.5)*20,
                    fillStyle:'#006eff',
                }
                particles.push(particle);  //符合条件的粒子保存到数组
            }
        }
    }
}*/
function  calculate(im) {

    for(var i=0;i<im.width;i++)
    {

        for(var j=0;j<im.height;j++)
        {

            var pos=(j*im.width+i)*4;
            if(im.data[pos]<50&&im.data[pos+3]>150)
            {
                var temp_particle=new Particle(i,j,1,pos,im);
                particles.push(temp_particle);
            }
        }
    }
}
var requestId;
function Animate() {
    //完成绘制的数量
    var complete_count=particles.filter(function (s) {
        return s.complete
    }).length;
    if(complete_count>=particles.length){
        //完成了
        cancelAnimationFrame(requestId);
        return;
    }
    cxt.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<particles.length;i++)
    {
        particles[i].update();
        particles[i].draw();
    }
    if(complete_count<particles.length)
    {
        requestId=requestAnimationFrame(Animate);
    }
}